<template>
	<view class="container999">
		<!-- <view class="title">标题</view> -->
		<view class='line'>
		  <view class='lineLeft'>姓名</view>
		  <view class="lineRight">  
			<!-- data-name为自定义参数名称,同时也会以此为参数名存入data的form中-->
			<input class="input" @input="change" :value="form.nickname" data-name="nickname" placeholder-class="plaClass" placeholder='请输入姓名'></input>
			</view>
		</view>
		<view class='line'>
		  <view class='lineLeft'>手机号</view>
			<view class="lineRight">  
				<input class="input" @input="change" :value="form.mobile" data-name="mobile" placeholder-class="plaClass" placeholder='请输入手机号'></input>
			</view>
		</view>
		<view class='line'>
		  <view class='lineLeft'>身份证</view>
			<view class="lineRight">  
				<input class="input" @input="change" :value="form.card" data-name="card" placeholder-class="plaClass" placeholder='请输入身份证'></input>
			</view>
		</view>
		
		<view class='line'>
		  <view class='lineLeft'>邮箱</view>
			<view class="lineRight">  
				<input class="input" @input="change" :value="form.email" data-name="email" placeholder-class="plaClass" placeholder='请输入邮箱'></input>
			</view>
		</view>
		
		<view class='line'>
		      <view class='lineLeft'>单位</view>
		      <view class="lineRight">
		        <input class="input" @input="change" :value="form.unit" data-name="unit" placeholder-class="plaClass" placeholder='请输入单位'></input>
		      </view>
		 </view>
		
		    <view class='line'>
		      <view class='lineLeft'>职务</view>
		      <view class="lineRight">
		        <input class="input" @input="change" :value="form.position" data-name="position" placeholder-class="plaClass" placeholder='请输入职务'></input>
		      </view>
		    </view>
		<view class="buttonBox" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	const valid = require('../../util/valid.js'); //校验规则文件
	const util = require('../../util/util.js');  //防重点击函数
	export default {
		data() {
			return {
				customItem: '全部', //地址picker的全部功能
				form:{
					
				}
			};
		},
		methods:{
			// 输入框或者picker事件方法
			change(e){
				let name = e.currentTarget.dataset.name;
				let tempVal = e.target.value || e.detail.value;
				if(this.form[name] === undefined){
					console.log('首次添加属性名')
					this.$set(this.form,name,tempVal)
				}else{
					// 若存在则直接赋值
					this.form[name] = tempVal
				}
			},
			// 验证方法
			toVaild(tempList){
				// valid(value,type)为引入的校验方法,49行可见
				return tempList.every((item,index)=>{
					let isVal = this.form[item.paramName]
					if(!isVal || !valid(isVal,item.rules)){
						uni.showModal({
						  title: '错误',
						  content: `${item.failPass}`,
						  showCancel:false
						})
						return false;
					}
					return true;
				})
			},
			// 提交
			submit: util.throttle(function(e) {
				let tempList = [{
					paramName:'nickname', //data-name和form中的参数名
					failPass:'请输入正确的姓名', //失败的提示
					rules:'name', //校验的规则名称
				},{
					paramName:'mobile', //data-name和form中的参数名
					failPass:'请输入正确的手机号', //失败的提示
					rules:'phone', //校验的规则名称
				},{
					paramName:'card', //data-name和form中的参数名
					failPass:'请输入正确的身份证', //失败的提示
					rules:'cardid', //valid中的规则名称
				}]
				if(this.toVaild(tempList)){
					console.log(this.form)
					uni.request({
											url: this.websiteUrl+'/api/user/profile',
											method: 'POST',
											data: {nickname:this.form.nickname,mobile:this.form.nickname,card:this.form.card,email:this.form.email,unit:this.form.unit,position:this.form.position},
											header: {
											     "Content-Type": "application/x-www-form-urlencoded",
												 "token": uni.getStorageSync('username').token,
											}, // 请求头
											success: res => {
												if	(res.data.code != 1){
													return uni.showToast({
														title:res.data.msg ? res.data.msg :'网络错误',
													});
												}
												uni.showToast({
													title:"修改成功",
													duration:2000,
													success() {
														
													}
												});
												
											},
											fail: () => {},
											complete: () => {
												
											}
										});
				}
			}, 1000), //防重点击,1s内只可点击一次
		},
		onLoad() {
			
		}
	}
</script>

<style lang="scss">
	.plaClass{
		color: #dbdbdb;
	}
	.container999{
		.title{
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 4%;
			border-bottom: 1px solid #f5f5f5;
		}
		.buttonBox{
			width: 91%;
			margin: 0 auto;
			height: 84rpx;
			border-radius: 84rpx;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 100rpx;
			left: 0;
			right: 0;
			background-color: #4a8be9;
		}
		.tri{
			width:0;
			height:0;
			border-left:8rpx solid transparent;
			border-right:8rpx solid transparent;
			right: 30rpx !important;
			border-top:16rpx solid #545151;
		}
		.line{
		  margin-top: 30rpx;
		  height: 100rpx;
		  width: 92%;
		  margin: 0 auto;
		  border-bottom: 1px solid #f5f5f5;
		  display: flex;
		  .lineRight{
			  .tips{
				  color: #9a9a9c;
				  font-weight: bold;
			  }
			 flex: 1;
			  height: 100%;
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  position: relative;
		  }
			.lineLeft{
			  display: flex;
			  width: 20%;
			  align-items: center;
			  height: 100%;
			  font-weight: bold;
			  color: #000000;
			}
			.input{
				padding-right: 20rpx;
				height: 100%;
				width: 70%;
				text-align: left;
				font-size: 28rpx;
				color: #545151;
			}
			.picker{
			 height: 100%;
			 justify-content: flex-start;
			  display: flex;
			  align-content: center;
			  width: 500rpx;
			}
			picker{
			  height: 84rpx;
			  line-height: 84rpx;
			}
		}
		width: 100vw;
		font-size: 28upx;
		min-height: 100vh;
		overflow: hidden;
		color: #6b8082;
		position: relative;
	}
</style>
